<template>
    <div class="settings">
        <h2>系统设置</h2>
        
        <el-card class="zhihu-card">
            <div slot="header" class="card-header">
                <span>知乎热榜</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="fetchHotList">刷新</el-button>
            </div>
            
            <el-table
                v-loading="loading"
                :data="hotList"
                style="width: 100%">
                <el-table-column
                    prop="index"
                    label="排名"
                    width="80">
                </el-table-column>
                <el-table-column
                    prop="title"
                    label="标题">
                    <template slot-scope="scope">
                        <a :href="scope.row.url" target="_blank">{{ scope.row.title }}</a>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="hot"
                    label="热度"
                    width="120">
                </el-table-column>
            </el-table>
            <div v-if="hotList.length" class="hotlist-display">
  <h3>🔥 知乎热榜前十（简洁展示）</h3>
  <ul>
    <li v-for="item in hotList.slice(0, 10)" :key="item.index">
      <strong>{{ item.index }}.</strong>
      <a :href="item.url" target="_blank">{{ item.title }}</a>
      <span class="hot-tag">（{{ item.hot }}）</span>
    </li>
  </ul>
</div>

        </el-card>
        
    </div>
</template>

<script>
import axios from 'axios'

export default {
    name: 'SettingsView',
    data() {
        return {
            hotList: [],
            loading: false
        }
    },
    created() {
        this.fetchHotList()
    },
    methods: {
        async fetchHotList() {
            this.loading = true
            try {
                const response = await axios.get('https://api.vvhan.com/api/hotlist/zhihuHot')
                if (response.data.success) {
                    this.hotList = response.data.data
                  console.log(this.hotList)

                } else {
                    this.$message.error('获取热榜数据失败')
                }
            } catch (error) {
                console.error('获取热榜数据出错：', error)
                this.$message.error('获取热榜数据出错')
            } finally {
                this.loading = false
            }
        }
    }
}
</script>

<style scoped>
.settings {
    padding: 20px;
}

.zhihu-card {
    margin-top: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

a {
    color: #409EFF;
    text-decoration: none;
}

a:hover {
    color: #66b1ff;
}
</style>